<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="language" content="en" />
        <link href="./assets/ffd55088/css/bootstrap.css" rel="stylesheet">
<link href="./assets/5cf9384a/solarized_light.css" rel="stylesheet">
<link href="./assets/6c54116e/style.css" rel="stylesheet">
<script src="./assets/a44cef0f/jquery.js"></script>
<script src="./assets/ffd55088/js/bootstrap.js"></script>
<script src="./assets/8ac4e28a/jssearch.js"></script>    <title>Theming - Displaying Data - The Definitive Guide to Yii 2.0</title>
</head>
<body>

<div class="wrap">
    <nav id="w548" class="navbar-inverse navbar-fixed-top navbar" role="navigation"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w548-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button><a class="navbar-brand" href="./index.html">The Definitive Guide to Yii 2.0</a></div><div id="w548-collapse" class="collapse navbar-collapse"><ul id="w549" class="navbar-nav nav"><li><a href="./index.html">Class reference</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Extensions <b class="caret"></b></a><ul id="w550" class="dropdown-menu"><li><a href="./ext-apidoc-index.html" tabindex="-1">apidoc</a></li>
<li><a href="./ext-authclient-index.html" tabindex="-1">authclient</a></li>
<li><a href="./ext-bootstrap-index.html" tabindex="-1">bootstrap</a></li>
<li><a href="./ext-codeception-index.html" tabindex="-1">codeception</a></li>
<li><a href="./ext-debug-index.html" tabindex="-1">debug</a></li>
<li><a href="./ext-elasticsearch-index.html" tabindex="-1">elasticsearch</a></li>
<li><a href="./ext-faker-index.html" tabindex="-1">faker</a></li>
<li><a href="./ext-gii-index.html" tabindex="-1">gii</a></li>
<li><a href="./ext-imagine-index.html" tabindex="-1">imagine</a></li>
<li><a href="./ext-jui-index.html" tabindex="-1">jui</a></li>
<li><a href="./ext-mongodb-index.html" tabindex="-1">mongodb</a></li>
<li><a href="./ext-redis-index.html" tabindex="-1">redis</a></li>
<li><a href="./ext-smarty-index.html" tabindex="-1">smarty</a></li>
<li><a href="./ext-sphinx-index.html" tabindex="-1">sphinx</a></li>
<li><a href="./ext-swiftmailer-index.html" tabindex="-1">swiftmailer</a></li>
<li><a href="./ext-twig-index.html" tabindex="-1">twig</a></li></ul></li>
<li><a href="./guide-README.html">Guide</a></li></ul><div class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input id="searchbox" type="text" class="form-control" placeholder="Search">
  </div>
</div>
</div></nav>
    <div id="search-resultbox" style="display: none;" class="modal-content">
        <ul id="search-results">
        </ul>
    </div>

    
<div class="row">
    <div class="col-md-2">
                <div id="navigation" class="list-group"><a class="list-group-item" href="#navigation-532" data-toggle="collapse" data-parent="#navigation">Introduction <b class="caret"></b></a><div id="navigation-532" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-intro-yii.html">About Yii</a>
<a class="list-group-item" href="./guide-intro-upgrade-from-v1.html">Upgrading from Version 1.1</a></div>
<a class="list-group-item" href="#navigation-533" data-toggle="collapse" data-parent="#navigation">Getting Started <b class="caret"></b></a><div id="navigation-533" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-start-installation.html">Installing Yii</a>
<a class="list-group-item" href="./guide-start-workflow.html">Running Applications</a>
<a class="list-group-item" href="./guide-start-hello.html">Saying Hello</a>
<a class="list-group-item" href="./guide-start-forms.html">Working with Forms</a>
<a class="list-group-item" href="./guide-start-databases.html">Working with Databases</a>
<a class="list-group-item" href="./guide-start-gii.html">Generating Code with Gii</a>
<a class="list-group-item" href="./guide-start-looking-ahead.html">Looking Ahead</a></div>
<a class="list-group-item" href="#navigation-534" data-toggle="collapse" data-parent="#navigation">Application Structure <b class="caret"></b></a><div id="navigation-534" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-structure-overview.html">Overview</a>
<a class="list-group-item" href="./guide-structure-entry-scripts.html">Entry Scripts</a>
<a class="list-group-item" href="./guide-structure-applications.html">Applications</a>
<a class="list-group-item" href="./guide-structure-application-components.html">Application Components</a>
<a class="list-group-item" href="./guide-structure-controllers.html">Controllers</a>
<a class="list-group-item" href="./guide-structure-models.html">Models</a>
<a class="list-group-item" href="./guide-structure-views.html">Views</a>
<a class="list-group-item" href="./guide-structure-modules.html">Modules</a>
<a class="list-group-item" href="./guide-structure-filters.html">Filters</a>
<a class="list-group-item" href="./guide-structure-widgets.html">Widgets</a>
<a class="list-group-item" href="./guide-structure-assets.html">Assets</a>
<a class="list-group-item" href="./guide-structure-extensions.html">Extensions</a></div>
<a class="list-group-item" href="#navigation-535" data-toggle="collapse" data-parent="#navigation">Handling Requests <b class="caret"></b></a><div id="navigation-535" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-runtime-overview.html">Overview</a>
<a class="list-group-item" href="./guide-runtime-bootstrapping.html">Bootstrapping</a>
<a class="list-group-item" href="./guide-runtime-routing.html">Routing and URL Creation</a>
<a class="list-group-item" href="./guide-runtime-requests.html">Requests</a>
<a class="list-group-item" href="./guide-runtime-responses.html">Responses</a>
<a class="list-group-item" href="./guide-runtime-sessions-cookies.html">Sessions and Cookies</a>
<a class="list-group-item" href="./guide-runtime-handling-errors.html">Handling Errors</a>
<a class="list-group-item" href="./guide-runtime-logging.html">Logging</a></div>
<a class="list-group-item" href="#navigation-536" data-toggle="collapse" data-parent="#navigation">Key Concepts <b class="caret"></b></a><div id="navigation-536" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-concept-components.html">Components</a>
<a class="list-group-item" href="./guide-concept-properties.html">Properties</a>
<a class="list-group-item" href="./guide-concept-events.html">Events</a>
<a class="list-group-item" href="./guide-concept-behaviors.html">Behaviors</a>
<a class="list-group-item" href="./guide-concept-configurations.html">Configurations</a>
<a class="list-group-item" href="./guide-concept-aliases.html">Aliases</a>
<a class="list-group-item" href="./guide-concept-autoloading.html">Class Autoloading</a>
<a class="list-group-item" href="./guide-concept-service-locator.html">Service Locator</a>
<a class="list-group-item" href="./guide-concept-di-container.html">Dependency Injection Container</a></div>
<a class="list-group-item" href="#navigation-537" data-toggle="collapse" data-parent="#navigation">Working with Databases <b class="caret"></b></a><div id="navigation-537" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-db-dao.html">Data Access Objects</a>
<a class="list-group-item" href="./guide-db-query-builder.html">Query Builder</a>
<a class="list-group-item" href="./guide-db-active-record.html">Active Record</a>
<a class="list-group-item" href="./guide-db-migrations.html">Migrations</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-sphinx/blob/master/docs/guide/README.md">Sphinx</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-redis/blob/master/docs/guide/README.md">Redis</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-mongodb/blob/master/docs/guide/README.md">MongoDB</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-elasticsearch/blob/master/docs/guide/README.md">ElasticSearch</a></div>
<a class="list-group-item" href="#navigation-538" data-toggle="collapse" data-parent="#navigation">Getting Data from Users <b class="caret"></b></a><div id="navigation-538" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-input-forms.html">Creating Forms</a>
<a class="list-group-item" href="./guide-input-validation.html">Validating Input</a>
<a class="list-group-item" href="./guide-input-file-upload.html">Uploading Files</a>
<a class="list-group-item" href="./guide-input-tabular-input.html">Collecting Tabular Input</a>
<a class="list-group-item" href="./guide-input-multiple-models.html">Getting Data for Multiple Models</a></div>
<a class="list-group-item active" href="#navigation-539" data-toggle="collapse" data-parent="#navigation">Displaying Data <b class="caret"></b></a><div id="navigation-539" class="submenu panel-collapse collapse in"><a class="list-group-item" href="./guide-output-formatting.html">Data Formatting</a>
<a class="list-group-item" href="./guide-output-pagination.html">Pagination</a>
<a class="list-group-item" href="./guide-output-sorting.html">Sorting</a>
<a class="list-group-item" href="./guide-output-data-providers.html">Data Providers</a>
<a class="list-group-item" href="./guide-output-data-widgets.html">Data Widgets</a>
<a class="list-group-item" href="./guide-output-client-scripts.html">Working with Client Scripts</a>
<a class="list-group-item active" href="./guide-output-theming.html">Theming</a></div>
<a class="list-group-item" href="#navigation-540" data-toggle="collapse" data-parent="#navigation">Security <b class="caret"></b></a><div id="navigation-540" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-security-overview.html">Overview</a>
<a class="list-group-item" href="./guide-security-authentication.html">Authentication</a>
<a class="list-group-item" href="./guide-security-authorization.html">Authorization</a>
<a class="list-group-item" href="./guide-security-passwords.html">Working with Passwords</a>
<a class="list-group-item" href="./guide-security-cryptography.html">Cryptography</a>
<a class="list-group-item" href="./guide-structure-views.html#security">Views security</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-authclient/blob/master/docs/guide/README.md">Auth Clients</a>
<a class="list-group-item" href="./guide-security-best-practices.html">Best Practices</a></div>
<a class="list-group-item" href="#navigation-541" data-toggle="collapse" data-parent="#navigation">Caching <b class="caret"></b></a><div id="navigation-541" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-caching-overview.html">Overview</a>
<a class="list-group-item" href="./guide-caching-data.html">Data Caching</a>
<a class="list-group-item" href="./guide-caching-fragment.html">Fragment Caching</a>
<a class="list-group-item" href="./guide-caching-page.html">Page Caching</a>
<a class="list-group-item" href="./guide-caching-http.html">HTTP Caching</a></div>
<a class="list-group-item" href="#navigation-542" data-toggle="collapse" data-parent="#navigation">RESTful Web Services <b class="caret"></b></a><div id="navigation-542" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-rest-quick-start.html">Quick Start</a>
<a class="list-group-item" href="./guide-rest-resources.html">Resources</a>
<a class="list-group-item" href="./guide-rest-controllers.html">Controllers</a>
<a class="list-group-item" href="./guide-rest-routing.html">Routing</a>
<a class="list-group-item" href="./guide-rest-response-formatting.html">Response Formatting</a>
<a class="list-group-item" href="./guide-rest-authentication.html">Authentication</a>
<a class="list-group-item" href="./guide-rest-rate-limiting.html">Rate Limiting</a>
<a class="list-group-item" href="./guide-rest-versioning.html">Versioning</a>
<a class="list-group-item" href="./guide-rest-error-handling.html">Error Handling</a></div>
<a class="list-group-item" href="#navigation-543" data-toggle="collapse" data-parent="#navigation">Development Tools <b class="caret"></b></a><div id="navigation-543" class="submenu panel-collapse collapse"><a class="list-group-item" href="https://github.com/yiisoft/yii2-debug/blob/master/docs/guide/README.md">Debug Toolbar and Debugger</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-gii/blob/master/docs/guide/README.md">Generating Code using Gii</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-apidoc">Generating API Documentation</a></div>
<a class="list-group-item" href="#navigation-544" data-toggle="collapse" data-parent="#navigation">Testing <b class="caret"></b></a><div id="navigation-544" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-test-overview.html">Overview</a>
<a class="list-group-item" href="./guide-test-environment-setup.html">Testing environment setup</a>
<a class="list-group-item" href="./guide-test-unit.html">Unit Tests</a>
<a class="list-group-item" href="./guide-test-functional.html">Functional Tests</a>
<a class="list-group-item" href="./guide-test-acceptance.html">Acceptance Tests</a>
<a class="list-group-item" href="./guide-test-fixtures.html">Fixtures</a></div>
<a class="list-group-item" href="#navigation-545" data-toggle="collapse" data-parent="#navigation">Special Topics <b class="caret"></b></a><div id="navigation-545" class="submenu panel-collapse collapse"><a class="list-group-item" href="https://github.com/yiisoft/yii2-app-advanced/blob/master/docs/guide/README.md">Advanced Project Template</a>
<a class="list-group-item" href="./guide-tutorial-start-from-scratch.html">Building Application from Scratch</a>
<a class="list-group-item" href="./guide-tutorial-console.html">Console Commands</a>
<a class="list-group-item" href="./guide-tutorial-core-validators.html">Core Validators</a>
<a class="list-group-item" href="./guide-tutorial-i18n.html">Internationalization</a>
<a class="list-group-item" href="./guide-tutorial-mailing.html">Mailing</a>
<a class="list-group-item" href="./guide-tutorial-performance-tuning.html">Performance Tuning</a>
<a class="list-group-item" href="./guide-tutorial-shared-hosting.html">Shared Hosting Environment</a>
<a class="list-group-item" href="./guide-tutorial-template-engines.html">Template Engines</a>
<a class="list-group-item" href="./guide-tutorial-yii-integration.html">Working with Third-Party Code</a></div>
<a class="list-group-item" href="#navigation-546" data-toggle="collapse" data-parent="#navigation">Widgets <b class="caret"></b></a><div id="navigation-546" class="submenu panel-collapse collapse"><a class="list-group-item" href="https://github.com/yiisoft/yii2-bootstrap/blob/master/docs/guide/README.md">Bootstrap Widgets</a>
<a class="list-group-item" href="https://github.com/yiisoft/yii2-jui/blob/master/docs/guide/README.md">jQuery UI Widgets</a></div>
<a class="list-group-item" href="#navigation-547" data-toggle="collapse" data-parent="#navigation">Helpers <b class="caret"></b></a><div id="navigation-547" class="submenu panel-collapse collapse"><a class="list-group-item" href="./guide-helper-overview.html">Overview</a>
<a class="list-group-item" href="./guide-helper-array.html">ArrayHelper</a>
<a class="list-group-item" href="./guide-helper-html.html">Html</a>
<a class="list-group-item" href="./guide-helper-url.html">Url</a></div></div>    </div>
    <div class="col-md-9 guide-content" role="main">
        <h1>Theming <span id="theming"></span><a href="#theming" class="hashlink">&para;</a></h1>
<div class="toc"><ol><li><a href="#theming-modules">Theming Modules</a></li>
<li><a href="#theming-widgets">Theming Widgets</a></li>
<li><a href="#theme-inheritance">Theme Inheritance</a></li></ol></div>
<p>Theming is a way to replace a set of <a href="guide-structure-views.html">views</a> with another without the need of touching
the original view rendering code. You can use theming to systematically change the look and feel of an application.</p>
<p>To use theming, you should configure the <a href="./yii-base-view.html#$theme-detail">theme</a> property of the <code>view</code> application component.
The property configures a <a href="./yii-base-theme.html">yii\base\Theme</a> object which governs how view files are being replaced. You should
mainly specify the following properties of <a href="./yii-base-theme.html">yii\base\Theme</a>:</p>
<ul>
<li><a href="./yii-base-theme.html#$basePath-detail">yii\base\Theme::$basePath</a>: specifies the base directory that contains the themed resources (CSS, JS, images, etc.)</li>
<li><a href="./yii-base-theme.html#$baseUrl-detail">yii\base\Theme::$baseUrl</a>: specifies the base URL of the themed resources.</li>
<li><a href="./yii-base-theme.html#$pathMap-detail">yii\base\Theme::$pathMap</a>: specifies the replacement rules of view files. More details will be given in the following
subsections.</li>
</ul>
<p>For example, if you call <code>$this-&gt;render('about')</code> in <code>SiteController</code>, you will be rendering the view file
<code>@app/views/site/about.php</code>. However, if you enable theming in the following application configuration,
the view file <code>@app/themes/basic/site/about.php</code> will be rendered, instead. </p>
<pre><code class="hljs php language-php"><span class="hljs-keyword">return</span> [
    <span class="hljs-string">'components'</span> =&gt; [
        <span class="hljs-string">'view'</span> =&gt; [
            <span class="hljs-string">'theme'</span> =&gt; [
                <span class="hljs-string">'basePath'</span> =&gt; <span class="hljs-string">'@app/themes/basic'</span>,
                <span class="hljs-string">'baseUrl'</span> =&gt; <span class="hljs-string">'@web/themes/basic'</span>,
                <span class="hljs-string">'pathMap'</span> =&gt; [
                    <span class="hljs-string">'@app/views'</span> =&gt; <span class="hljs-string">'@app/themes/basic'</span>,
                ],
            ],
        ],
    ],
];
</code></pre>
<blockquote class="info"><p><strong>Info: </strong>Path aliases are supported by themes. When doing view replacement, path aliases will be turned into 
  the actual file paths or URLs.</p>
</blockquote>
<p>You can access the <a href="./yii-base-theme.html">yii\base\Theme</a> object through the <a href="./yii-base-view.html#$theme-detail">yii\base\View::$theme</a> property. For example,
in a view file, you can write the following code because <code>$this</code> refers to the view object:</p>
<pre><code class="hljs php language-php"><span class="hljs-variable">$theme</span> = <span class="hljs-variable">$this</span>-&gt;theme;

<span class="hljs-comment">// returns: $theme-&gt;baseUrl . '/img/logo.gif'</span>
<span class="hljs-variable">$url</span> = <span class="hljs-variable">$theme</span>-&gt;getUrl(<span class="hljs-string">'img/logo.gif'</span>);

<span class="hljs-comment">// returns: $theme-&gt;basePath . '/img/logo.gif'</span>
<span class="hljs-variable">$file</span> = <span class="hljs-variable">$theme</span>-&gt;getPath(<span class="hljs-string">'img/logo.gif'</span>);
</code></pre>
<p>The <a href="./yii-base-theme.html#$pathMap-detail">yii\base\Theme::$pathMap</a> property governs how view files should be replaced. It takes an array of 
key-value pairs, where the keys are the original view paths to be replaced and the values are the corresponding 
themed view paths. The replacement is based on partial match: if a view path starts with any key in 
the <a href="./yii-base-theme.html#$pathMap-detail">pathMap</a> array, that matching part will be replaced with the corresponding array value.
Using the above configuration example, because <code>@app/views/site/about.php</code> partially matches the key
<code>@app/views</code>, it will be replaced as <code>@app/themes/basic/site/about.php</code>.</p>
<h2>Theming Modules  <span id="theming-modules"></span><a href="#theming-modules" class="hashlink">&para;</a></h2><p>In order to theme modules, <a href="./yii-base-theme.html#$pathMap-detail">yii\base\Theme::$pathMap</a> can be configured like the following:</p>
<pre><code class="hljs php language-php"><span class="hljs-string">'pathMap'</span> =&gt; [
    <span class="hljs-string">'@app/views'</span> =&gt; <span class="hljs-string">'@app/themes/basic'</span>,
    <span class="hljs-string">'@app/modules'</span> =&gt; <span class="hljs-string">'@app/themes/basic/modules'</span>, <span class="hljs-comment">// &lt;-- !!!</span>
],
</code></pre>
<p>It will allow you to theme <code>@app/modules/blog/views/comment/index.php</code> into <code>@app/themes/basic/modules/blog/views/comment/index.php</code>.</p>
<h2>Theming Widgets  <span id="theming-widgets"></span><a href="#theming-widgets" class="hashlink">&para;</a></h2><p>In order to theme widgets, you can configure <a href="./yii-base-theme.html#$pathMap-detail">yii\base\Theme::$pathMap</a> in the following way:</p>
<pre><code class="hljs php language-php"><span class="hljs-string">'pathMap'</span> =&gt; [
    <span class="hljs-string">'@app/views'</span> =&gt; <span class="hljs-string">'@app/themes/basic'</span>,
    <span class="hljs-string">'@app/widgets'</span> =&gt; <span class="hljs-string">'@app/themes/basic/widgets'</span>, <span class="hljs-comment">// &lt;-- !!!</span>
],
</code></pre>
<p>This will allow you to theme <code>@app/widgets/currency/views/index.php</code> into <code>@app/themes/basic/widgets/currency/index.php</code>.</p>
<h2>Theme Inheritance  <span id="theme-inheritance"></span><a href="#theme-inheritance" class="hashlink">&para;</a></h2><p>Sometimes you may want to define a basic theme which contains a basic look and feel of the application, and then
based on the current holiday, you may want to vary the look and feel slightly. You can achieve this goal using
theme inheritance which is done by mapping a single view path to multiple targets. For example,</p>
<pre><code class="hljs php language-php"><span class="hljs-string">'pathMap'</span> =&gt; [
    <span class="hljs-string">'@app/views'</span> =&gt; [
        <span class="hljs-string">'@app/themes/christmas'</span>,
        <span class="hljs-string">'@app/themes/basic'</span>,
    ],
]
</code></pre>
<p>In this case, the view <code>@app/views/site/index.php</code> would be themed as either <code>@app/themes/christmas/site/index.php</code> 
or <code>@app/themes/basic/site/index.php</code>, depending on which themed file exists. If both themed files exist, the first
one will take precedence. In practice, you would keep most themed view files in <code>@app/themes/basic</code> and customize
some of them in <code>@app/themes/christmas</code>.</p>
        <div class="toplink"><a href="#" class="h1" title="go to top"><span class="glyphicon glyphicon-arrow-up"></a></div>
    </div>
</div>


</div>

<footer class="footer">
        <p class="pull-right"><small>Page generated on Sat, 09 Jul 2016 12:16:29 +0000</small></p>
    Powered by <a href="http://www.yiiframework.com/" rel="external">Yii Framework</a></footer>

<script type="text/javascript">jQuery(document).ready(function () {
    var shiftWindow = function () { scrollBy(0, -50) };
    if (location.hash) setTimeout(shiftWindow, 1);
    window.addEventListener("hashchange", shiftWindow);
var element = document.createElement("script");
element.src = "./jssearch.index.js";
document.body.appendChild(element);

var searchBox = $('#searchbox');

// search when typing in search field
searchBox.on("keyup", function(event) {
    var query = $(this).val();

    if (query == '' || event.which == 27) {
        $('#search-resultbox').hide();
        return;
    } else if (event.which == 13) {
        var selectedLink = $('#search-resultbox a.selected');
        if (selectedLink.length != 0) {
            document.location = selectedLink.attr('href');
            return;
        }
    } else if (event.which == 38 || event.which == 40) {
        $('#search-resultbox').show();

        var selected = $('#search-resultbox a.selected');
        if (selected.length == 0) {
            $('#search-results').find('a').first().addClass('selected');
        } else {
            var next;
            if (event.which == 40) {
                next = selected.parent().next().find('a').first();
            } else {
                next = selected.parent().prev().find('a').first();
            }
            if (next.length != 0) {
                var resultbox = $('#search-results');
                var position = next.position();

//              TODO scrolling is buggy and jumps around
//                resultbox.scrollTop(Math.floor(position.top));
//                console.log(position.top);

                selected.removeClass('selected');
                next.addClass('selected');
            }
        }

        return;
    }
    $('#search-resultbox').show();
    $('#search-results').html('<li><span class="no-results">No results</span></li>');

    var result = jssearch.search(query);

    if (result.length > 0) {
        var i = 0;
        var resHtml = '';

        for (var key in result) {
            if (i++ > 20) {
                break;
            }
            resHtml = resHtml +
            '<li><a href="' + result[key].file.u.substr(3) +'"><span class="title">' + result[key].file.t + '</span>' +
            '<span class="description">' + result[key].file.d + '</span></a></li>';
        }
        $('#search-results').html(resHtml);
    }
});

// hide the search results on ESC
$(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } });
// hide search results on click to document
$(document).bind('click', function (e) { $('#search-resultbox').hide(); });
// except the following:
searchBox.bind('click', function(e) { e.stopPropagation(); });
$('#search-resultbox').bind('click', function(e) { e.stopPropagation(); });

});</script></body>
</html>
